import React, { Component } from 'react';
import { Form, Input, Select,InputNumber,Row,Col } from 'antd';
import './modal.css';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ColorIcon from '../../assets/image/colorbox2.png';
import { CompactPicker } from 'react-color';
import { reqCurvesName } from '../../api';

const { Option } = Select;

class EditCurveForm extends Component {

  static propTypes = {     
    curve: PropTypes.object.isRequired,
    setForm: PropTypes.func.isRequired,
    setColor: PropTypes.func.isRequired,
    
  }
  

  state = {
    curveNameArray:['空'],    // 所有的曲线名 数组
    visible: false,
    number: 2,        // 设置默认width，接收传入的当前width
    color: this.props.curve.color     // 设置默认颜色，接收传入的当前颜色
  }

  getAllCurveNameInDoc = async(docData) => {   // 获取所有曲线名
    const curveNameArray = ["空"];
    if(docData.doc_type === "纯数据文件"){
      docData.curves.map((item) => {
        if(item.type === 'curve'){
          curveNameArray.push(item.curve_name);
        }
      })
    }else if(docData.doc_type === "绘图文件"){
      docData.docData.curves.map((item) => {
        if(item.type === 'curve'){
          curveNameArray.push(item.curve_name);
        }
      })
    }
    this.setState({ curveNameArray });
  }   

  handleChangeComplete = (color) => {  // 更新曲线颜色
    this.setState({ color: color.hex });
  };

  onNumberChange = value => {  // 更新曲线width
    this.setState({
      number: value
    });
  };

  showCompactPicker = () => {  // 切换 是否显示色板
    this.setState({
      visible: !this.state.visible
    })
  }

  formRef = React.createRef();  // form对象
  
  handleOnBlur = (e) => {  // 当用户别名没有输入时，自动填写为当前的 曲线名
    if(e.target.value.length === 0){
      this.formRef.current.setFieldsValue({curve_name_another:this.formRef.current.getFieldValue('curve_name')});   
    }
  }
  
  componentWillMount(){
    this.getAllCurveNameInDoc(this.props.docData);
  }

  componentWillReceiveProps(nextProps){
    //console.log("编辑曲线属性",nextProps.docData);
    this.getAllCurveNameInDoc(nextProps.docData);
  }
 
  
  componentDidMount() {  
    this.props.setForm(this.formRef);  // 调用父组件传递的函数，目的是将 参数以实参的形式传递给父组件 
  }

  render() {
    console.log("curvessss",this.props.curve)
    const { curve_name,title,left_data, right_data, width ,line_type ,curve_unit} = this.props.curve;
    const {number,color,visible} = this.state;
    return (
      <div className="edit-curve-form">
        <Form 
          ref={this.formRef}   
          name="control-ref" 
          onFinish={this.onFinish}
          initialValues={{
            curve_name: curve_name,
            curve_name_another: title,
            curve_width: width,
            curve_color: this.props.curve.color,
            curve_left: left_data,  
            curve_right: right_data,
            line_type:line_type,
            curve_unit:curve_unit
          }}
        >   
          <Row>
            <Col span={10} className="curve-col">
              <Form.Item 
                name="curve_name" 
                label="曲线名" 
                rules={[{ required: true , message: '请选择曲线名!'}]}
              >  
                <Select
                  placeholder="请选择曲线名"
                  allowClear
                  style={{width:120}}
                >
                  {this.state.curveNameArray.map((item) => <Option value={item}>{item}</Option>)}
                </Select>
              </Form.Item>
            </Col>
            <Col span={2} className="curve-col"></Col>
            <Col span={11} className="curve-col">
              <Form.Item
                name="curve_name_another"
                label="&nbsp;&nbsp;&nbsp;显示名"
              >
                <Input 
                  placeholder="请输入曲线显示名"
                  onBlur={(e) => this.handleOnBlur(e)}
                />
              </Form.Item>
            </Col>
          </Row> 

          <Row>
            <Col span={8} className="curve-col">
              <Form.Item
                name="curve_left"
                label="左&nbsp;&nbsp;&nbsp;&nbsp;值(px)"
                rules={[{ required: true, message: '请输入左值!' }]}
              >
                <Input />
              </Form.Item> 
            </Col>
            <Col span={4} className="curve-col"></Col>
            <Col span={12} className="curve-col">
              <Form.Item
                name="curve_width"
                label="宽度(px)"
                rules={[{ required: true, message: '请输入宽度!' }]}
              >
                <InputNumber min={1} max={8} value={number} onChange={this.onNumberChange} />
              </Form.Item>
            </Col>
          </Row> 

          <Row>
            <Col span={8}>
              <Form.Item
                name="curve_right"
                label="右&nbsp;&nbsp;&nbsp;&nbsp;值(px)"
                rules={[{ required: true, message: '请输入右值!' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={4} className="curve-col"></Col>
            <Col span={11} className="curve-col">
              <Form.Item
                name="curve_unit"
                label="&nbsp;&nbsp;&nbsp;单位"
              >
                <Input 
                  placeholder="请输入曲线单位"
                />
              </Form.Item>
            </Col>
          </Row>  

          <Row>
            <Col span={12} className="curve-col">
              <Form.Item
                name="line_type"
                label="曲线类型"
              >
                <Select
                  style={{width:120}}
                >
                  <Option value='solid'>实线</Option>
                  <Option value='dashed'>虚线</Option>
                  <Option value='dotted'>点线</Option>
                </Select>
              </Form.Item> 
            </Col>
            <Col span={8}>
              <Form.Item
                className="curve-color"
                name="curve_color"
                label="颜色"
                rules={[{ required: true, message: '请选择曲线颜色!' }]}
              >
                {this.props.setColor(color)}     {/* 传递color的值 */}
                <Input value={color} type="hidden" />
                <div className="color-div">
                  <div 
                    style={{
                      width: 88,
                      height: this.state.number,
                      marginTop: 14,
                      backgroundColor: color
                      }}
                  ></div>   
                </div>
                
                {(visible === true) ? (<CompactPicker 
                                          className="color-picker"
                                          color={ this.state.color }
                                          onChangeComplete={ this.handleChangeComplete }
                                        /> ) : null }
                
              </Form.Item>
            </Col>
            
            <Col span={2}>
              <img src={ColorIcon} alt="color-icon" onClick={this.showCompactPicker}></img>
            </Col>
            
            
          </Row>  
        </Form>
      </div>  
    )
  }
}

export default connect(
  state => ({user: state.user ,docData: state.docData,}),
  {}
)(EditCurveForm);

